.top {
  width: 100%;
  height: calc((433 / 740) * 100%);
  @include data-margin-bottom(0.2625rem);
  @include data-bg-color(#20204e);
  .title {
    overflow: hidden;
    .h3 {
      margin: 0;
      padding: 0;
      @include data-color(#fff);
      text-align: center;
      @include data-font-size(0.225rem);
      font-weight: Bold;
      @include data-height(0.625rem);
      // @include data-line-height(0.625rem);
      margin-top: 0.375rem;
    }
  }
  .pie-chart {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    @include data-padding(0.25rem 0.6875rem 0rem);
    div {
    }
    #perishable {
      position: relative;
      &::before {
        content: "易腐垃圾";
        display: inline-block;
        @include data-color(#00ff18);
        font-weight: bold;
        width: 100%;
        text-align: center;
        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        top: calc(100% + 0.225rem);
      }
      &::after {
        content: attr(text);
        display: inline-block;
        @include data-color(#00ff18);
        font-weight: bold;
        width: 100%;
        text-align: center;
        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        @include data-bottom(-0.85rem);
      }
    }

    #recyclable {
      position: relative;
      &::before {
        content: "可回收物";
        display: inline-block;
        @include data-color(#00e4ff);
        font-weight: bold;
        width: 100%;
        text-align: center;

        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        top: calc(100% + 0.225rem);
      }
      &::after {
        content: attr(text);
        display: inline-block;
        @include data-color(#00e4ff);
        font-weight: bold;
        width: 100%;
        text-align: center;
        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        @include data-bottom(-0.85rem);
      }
    }

    #hazardous {
      position: relative;
      &::before {
        content: "有害垃圾";
        display: inline-block;
        @include data-color(#ff352b);
        font-weight: bold;
        width: 100%;
        text-align: center;
        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        top: calc(100% + 0.225rem);
      }
      &::after {
        content: attr(text);
        display: inline-block;
        @include data-color(#ff352b);
        font-weight: bold;
        width: 100%;
        text-align: center;
        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        @include data-bottom(-0.85rem);
      }
    }

    #other {
      position: relative;
      &::before {
        content: "其他垃圾";
        display: inline-block;
        @include data-color(#fffefe);
        font-weight: bold;
        width: 100%;
        text-align: center;

        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        top: calc(100% + 0.225rem);
      }
      &::after {
        content: attr(text);
        display: inline-block;
        @include data-color(#fffefe);
        font-weight: bold;
        width: 100%;
        text-align: center;
        @include data-font-size(0.225rem);
        font-weight: bold;
        position: absolute;
        @include data-bottom(-0.85rem);
      }
    }
  }
}
